<template>
  <div class="trainer-container">
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-form ref="form" :model="formInline" label-width="100px">
        <el-row>
          <el-col :span="12">
            <span class="traing"></span>今日训练内容
            <span class="traing"></span>
          </el-col>
          <el-col :span="12">
            <el-form-item label=" " prop="boatType">
              <el-select
                @change="gatetime1"
                v-model="queryParams.training_status_7"
                placeholder="年度选择"
                clearable
                size="small"
                style="width: 160px"
              >
                <el-option
                  v-for="dict in statusIlls"
                  :key="dict.name"
                  :label="dict.name"
                  :value="dict.name"
                />
              </el-select>
              <el-button type="primary" class="newill" @click="harderClick">
                <i class="icon iconfont icon-zaocan"></i>
                <span>进入当日训练计划</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <el-steps :active="milepostActive" :space="200">
        <el-step
          v-for="(value, i) in milepost"
          :key="i"
          :class="milepostActive== key+1 ? stepActive: '' "
          :title="value.title"
          :description="value.description"
        ></el-step>
      </el-steps>-->
      <el-steps :active="1" class="admin-icon">
        <el-step title="拉升，称体重" icon="icon iconfont icon--pt" description="7:00"></el-step>
        <el-step title="早晨" icon="icon iconfont icon-zaocan" description="7.30"></el-step>
        <el-step title="功能训练" icon="icon iconfont icon-b_ic_xunlian" description="8.30-10.40"></el-step>
        <el-step title="水上训练14km" icon="icon iconfont icon-shui" description="10.50-11.10"></el-step>
        <el-step title="拉升" icon="icon iconfont icon-zaixianduanlian" description="11.20-11.40"></el-step>
        <el-step
          title="协调性训练"
          icon="icon iconfont icon-changyonggongneng-xunlianying"
          description="14.30-15.30"
        ></el-step>
        <el-step title="小肌肉群力量训练" icon="icon iconfont icon-jirou" description="15.30-17.20"></el-step>
      </el-steps>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-col :span="8" class="Completion">
        <span class="traing"></span>阶段目标完成情况(年度目标)
        <span class="traing"></span>
      </el-col>
      <el-col :span="12" class="Completion">
        <span class="target-time"></span>
        <span>
          当前处于:冬训期/第
          <i>12</i>个星期/大量积累周/
          <i>119</i>天
        </span>
      </el-col>

      <el-table :data="tableData" style="width: 100%">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="date" label="目标项">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="basic" label="一般准备期"></el-table-column>
        <el-table-column prop="sprite" label="冬训期"></el-table-column>
        <el-table-column prop="transition" label="过渡期"></el-table-column>
        <el-table-column prop="reay" label="赛前准备期"></el-table-column>
        <el-table-column prop="summer" label="夏训期"></el-table-column>
      </el-table>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-col :span="12">
        <span class="traing"></span>年度训练地点/比赛地点
        <span class="traing"></span>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" :model="formInline" label-width="100px">
          <el-form-item label=" ">
            <el-select
              v-model="queryParams.training_status_6"
              placeholder="训练地点"
              @change="dataArea"
            >
              <el-option label="训练地点" value="6"></el-option>
              <el-option label="比赛地点" value="traicomplate"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <div id="dataname" style="height:400px;width:100%;"></div>
      </el-col>
      <el-col :span="12">
        <el-table :data="manage" style="width: 100%" v-if="queryParams.training_status_6=='6'">
          <el-table-column prop="adress" label="训练地点" width="180"></el-table-column>
          <el-table-column prop="count" label="周期" width="180"></el-table-column>
          <el-table-column prop="week" label="次数" width="180"></el-table-column>
        </el-table>
        <el-table
          :data="manage"
          style="width: 100%"
          v-if="queryParams.training_status_6=='traicomplate'"
        >
          <el-table-column prop="train" label="比赛地点" width="280"></el-table-column>
          <el-table-column prop="period" label="时间"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-form ref="form" :model="formInline" label-width="100px">
        <el-row>
          <el-col :span="12">
            <span class="traing"></span>2020年度各训练科目完成进度
            <span class="traing"></span>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-date-picker
                v-model="value1"
                @change="gatetime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
              ></el-date-picker>
              <span class="server-table" @click="tabledata">
                <i style="font-size:30px" class="el-icon-s-data"></i>
              </span>
              <span class="server-table" @click="tableoperation">
                <i style="font-size:30px" class="el-icon-s-operation"></i>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-show="showGroup">
        <el-row>
          <el-col :span="24" class="nowtarget">
            <span>
              <img src="@/assets/image/right.png" />
            </span>阶段目标下专项训练滑行公里数ss
            <span>
              <img src="@/assets/image/right.png" />
            </span>
          </el-col>
        </el-row>
        <el-row>sss
          <el-col :span="24" class="nowtarget" id="pictrues"></el-col>
        </el-row>
        <el-col :span="6">
          <div id="pic1"></div>
        </el-col>
        <el-col :span="6">
          <div id="pic2"></div>
        </el-col>
        <el-col :span="6">
          <div id="pic3"></div>
        </el-col>
        <el-col :span="6">
          <div id="pic4"></div>
        </el-col>
        <el-col :span="6">
          <div id="pic5"></div>
        </el-col>
        <el-col :span="6">
          <div id="pic6"></div>
        </el-col>
        <el-col :span="6">
          <div id="pic7"></div>
        </el-col>
        <el-col :span="6">
          <div id="pic8"></div>
        </el-col>
      </div>
      <div v-show="showtable">
        <el-table :data="manage" style="width: 100%">
          <el-table-column prop="train" label="比赛地点"></el-table-column>
          <el-table-column prop="period" label="时间"></el-table-column>
          <el-table-column prop="times" label="次数"></el-table-column>
          <el-table-column prop="times" label="次数"></el-table-column>
          <el-table-column prop="times" label="次数"></el-table-column>
          <el-table-column prop="times" label="次数"></el-table-column>
        </el-table>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="always">
            <div class="train-font">水上专项训练目标还差</div>
            <div class="train-target">
              <span>36.7%</span>
              <span class="target"></span>
              <span>89公里</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="train-font">水上专项训练目标还差</div>
            <div class="train-target">
              <span>36.7%</span>
              <span class="target"></span>
              <span>89公里</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="train-font">水上专项训练目标还差</div>
            <div class="train-target">
              <span>36.7%</span>
              <span class="target"></span>
              <span>89公里</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="train-font">水上专项训练目标还差</div>
            <div class="train-target">
              <span>36.7%</span>
              <span class="target"></span>
              <span>89公里</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-row>
    <div id="pic9"></div>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-col :span="12">
        <p>2020年度队伍专项训练最好成绩</p>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" :model="formInline" label-width="100px">
          <el-form-item>
            <el-select v-model="formInline.region" placeholder="项目选择">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-select v-model="formInline.region" placeholder="艇支筛选">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-table :data="manage" style="width: 100%">
        <el-table-column prop="train" label="训练地点"></el-table-column>
        <el-table-column prop="period" label="周期"></el-table-column>
        <el-table-column prop="times" label="次数"></el-table-column>
        <el-table-column prop="times" label="次数"></el-table-column>
        <el-table-column prop="times" label="次数"></el-table-column>
        <el-table-column prop="times" label="次数"></el-table-column>
      </el-table>
      <el-table :data="manage" style="width: 100%">
        <el-table-column prop="train" label="比赛地点"></el-table-column>
        <el-table-column prop="period" label="时间"></el-table-column>
        <el-table-column prop="times" label="次数"></el-table-column>
        <el-table-column prop="times" label="次数"></el-table-column>
        <el-table-column prop="times" label="次数"></el-table-column>
        <el-table-column prop="times" label="次数"></el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>
// import lineChart from "./dashboard/lineChart";
// import moment from "moment";
import axios from "axios";
import "echarts/map/js/china.js";
import {
  selectime,
  traing,
  target,
  totalweek,
  Traininglocation,
  showtimes,
} from "@/api/monitor/logininfor";

export default {
  data() {
    return {
      value1: [{}],
      categoriesx:[],
       arrvalue:[],
       pointArr: [], //这个是第一个的 用来放点的  也就是series中的data的
       pointArr2: [],
      milepostActive: 1,
      stepActive: "stepActive",
      key: 0,
      showGroup: true,
      showtable: false,
      formInline: {
        user: "",
        region: "",
      },
      queryParams: {
        training_status_6: "6",
        training_status_7: "",
      },
      statusIlls: [],
      //   milepost: [
      //     { title: "拉伸秤体重", description: "2019.1.1" },
      //     { title: "早晨", description: "2019.3.1" },
      //     { title: "功能训练", description: "2019.5.1" },
      //     { title: "水上训练", description: "2019.7.1" },
      //     { title: "拉伸", description: "2019.9.1" },
      //     { title: "协调性训练", description: "2019.11.1" },
      //     { title: "肌肉群力量训练", description: "2019.12.31" },
      //   ],
      tableData: [
        {
          date: "时间",
          basic: "",
          sprite: "",
          transition: "",
          reay: "",
          summer: "",
        },
        {
          date: "周期",
          basic: "",
          sprite: "",
          transition: "",
          reay: "",
          summer: "",
        },
        {
          date: "累计天数",
          basic: "",
          sprite: "",
          transition: "",
          reay: "",
          summer: "",
        },
        {
          date: "累计大量积累周",
          basic: "",
          sprite: "",
          transition: "",
          reay: "",
          summer: "",
        },
        {
          date: "累计积累周",
          basic: "",
          sprite: "",
          transition: "",
          reay: "",
          summer: "",
        },
        {
          date: "累计基本周",
          basic: "",
          sprite: "",
          transition: "",
          reay: "",
          summer: "",
        },
        {
          date: "累计比赛周",
          basic: "",
          sprite: "",
          transition: "",
          reay: "",
          summer: "",
        },
        {
          date: "累计塞前强化周",
          basic: "",
          sprite: "",
          transition: "",
          reay: "",
          summer: "",
        },
        {
          date: "累计恢复周",
          basic: "",
          sprite: "",
          transition: "",
          reay: "",
          summer: "",
        },
      ],
      tableData1: [],
      manage: [],
      markPointData: [
        {
          name: "四川移动",
          coord: [
            123.97,
            47.33, //坐标，通过百度地图提取
          ],
          symbol: "/img/1.png", // 标注图片地址路径
          symbolSize: 32,
          service: "这个是自定义的字段，不是echarts的配置",
          url: "这个也是自定义的字段，不是echarts的配置",
        },
        {
          name: "河南电信",
          coord: [125.97, 47.33],
          symbol: "/img/2.png", // 标注图片地址路径
          symbolSize: 32,
          service: "自定义",
          url: "http://www.idcd.com",
        },
        {
          name: "北京联通",
          coord: [126.97, 47.33],
          symbol: "/img/3.png", // 标注图片地址路径
          symbolSize: 32,
          service: "自定义",
          url: "http://www.idcd.com",
        },
      ],
    };
  },
  created() {
    selectime()
      .then((response) => {
        this.statusIlls = response.data;
      })
      .catch((res) => {});
    traing()
      .then((res) => {
        console.log(res);
      })
      .catch((res) => {});

    totalweek()
      .then((res) => {})
      .catch((res) => {});
    // 训练地点
    Traininglocation().then((res) => {
      this.manage = res.data;
    });

    target().then((res) => {
      var daytime = res.data.annualPlan[1].startTime;
      var starttime = new Date(daytime);
      var start = starttime.getTime();
      var endtimes = res.data.annualPlan[1].endTime;
      var total = daytime + "~" + endtimes;
      var time = new Date(endtimes);
      var end = time.getTime();
      var iDays = Math.ceil(Math.abs(end - start) / 1000 / 60 / 60 / 24);
      var weekday = Math.floor(iDays / 7);
      this.tableData[1].basic = weekday;
      this.tableData[0].basic = total;

      var time1 = res.data.annualPlan[4].startTime;
      var times1 = new Date(time1).getTime();
      var end2 = res.data.annualPlan[4].endTime;
      var total1 = time1 + "~" + end2;
      var ends2 = new Date(end2).getTime();
      var iDays2 = Math.ceil(Math.abs(ends2 - times1) / 1000 / 60 / 60 / 24);
      var weekday2 = Math.floor(iDays2 / 7);
      this.tableData[1].sprite = weekday2;
      this.tableData[0].sprite = total1;
      // var time3 = res.data.annualPlan[1].startTime;
      // var times3 = new Date(time1).getTime();
      // var end2 = res.data.annualPlan[4].endTime;
      // var ends2 = new Date(end2).getTime();

      var time4 = res.data.annualPlan[3].startTime;
      var times4 = new Date(time4).getTime();
      var end4 = res.data.annualPlan[3].endTime;
      var ends4 = new Date(end4).getTime();
      var total2 = time4 + "~" + end4;
      var iDays4 = Math.ceil(Math.abs(ends4 - times4) / 1000 / 60 / 60 / 24);
      var weekday4 = Math.floor(iDays4 / 7);
      this.tableData[1].summer = weekday4;
      this.tableData[0].summer = total2;

      var time5 = res.data.annualPlan[5].startTime;
      var times5 = new Date(time1).getTime();
      var end5 = res.data.annualPlan[5].endTime;
      var ends5 = new Date(end2).getTime();
      var total3 = time5 + "~" + end5;
      var iDays5 = Math.ceil(Math.abs(ends5 - times5) / 1000 / 60 / 60 / 24);
      var weekday5 = Math.floor(iDays5 / 7);
      this.tableData[1].reay = weekday5;
      this.tableData[0].reay = total3;

      var time6 = res.data.annualPlan[0].startTime;
      var times6 = new Date(time6).getTime();
      var end6 = res.data.annualPlan[0].endTime;
      var total4 = time6 + "~" + end6;
      var ends6 = new Date(end6).getTime();
      var tlmes7 = time6 + "~" + end6 + "";
      var iDays6 = Math.ceil(Math.abs(ends6 - times6) / 1000 / 60 / 60 / 24);
      var weekday6 = Math.floor(iDays6 / 7);
      this.tableData[1].transition = weekday6;
      this.tableData[0].transition = total4;
    });
    showtimes().then((res)=>{
                    this.categoriesx=res.data.special_training_water;
                   
                  this.pointArr = []; // 每次掉这个接口的时候 都要把数据清空
                  this.arrvalue = [];
                  this.pointArr2 = [];
                  //  categoriesx 是个对象数组，把这个里面的month，push给一个新数组
                 for(var i=0;i<this.categoriesx.length;i++){

                  this.arrvalue.push(this.categoriesx[i].month)
                  this.pointArr.push(this.categoriesx[i].completionKm)
                  
                 }
                 for (let i = 0; i < res.data.land_specific_training_dynamometer.length;i++) {
                   this.pointArr2.push(res.data.land_specific_training_dynamometer[i].completionKm)

                 }
                 this.watermethods("pictrues");

    })
  },
  mounted() {
    this.initData("pic1");
    this.initData("pic2");
    this.initData("pic3");
    this.initData("pic4");
    this.initData("pic5");
    this.initData("pic6");
    this.initData("pic7");
    this.initData("pic8");
    this.TrainTarget("pic9");
    this.traingmps("dataname");
    this.watermethods("pictrues");
  },
  methods: {
    gatetime() {},
    gatetime1() {},
    harderClick() {},
    tabledata() {
      this.showGroup = true;
      this.showtable = false;
    },
    // 比赛和训练地点
    dataArea(value) {
      if (value == "traicomplate") {
        Traininglocation(value).then((res) => {
          this.manage = res.data;
        });
      }
    },
    tableoperation() {
      this.showtable = true;
      this.showGroup = false;
    },
    initData(element) {
      // 基于准备好的dom，初始化echarts实例

      var myChart = this.$echarts.init(document.getElementById(element));

      // 绘制图表
      myChart.setOption({
        title: {
          text: "各维度训练时间占比", //主标题
          //   subtext: '纯属虚构',//副标题
          x: "center", //x轴方向对齐方式
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        //   legend: {
        //       orient: 'vertical',
        //       bottom: 'bottom',
        //       data: ['直接访问','邮件营销','联盟广告','视频广告']
        //   },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              // {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    TrainTarget(element) {
      // 基于准备好的dom，初始化echarts实例

      var myChart = this.$echarts.init(document.getElementById(element));

      // 绘制图表
      myChart.setOption({
        title: {
          text: "资源总览",
          left: "20px",
          textStyle: {
            color: "#436EEE",
            fontSize: 17,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: ["网络设备", "服务器", "应用", "其他", "虚拟机", "存储"],
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
        },
        //   legend: {
        //       orient: 'vertical',
        //       bottom: 'bottom',
        //       data: ['直接访问','邮件营销','联盟广告','视频广告']
        //   },
        series: [
          {
            name: "可用",
            type: "bar",
            stack: "使用情况",
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {
              normal: { color: "#FF8849" },
            },
          },
          {
            name: "不可用",
            type: "bar",
            stack: "使用情况",
            data: [40, 22, 18, 35, 42, 40],
            itemStyle: {
              normal: { color: "#3FBB49" },
            },
          },
        ],
      });
    },
    traingmps(element) {
      var myChart = this.$echarts.init(document.getElementById(element));
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["训练地点", "比赛地点"],
        },
        series: [
          {
            name: "训练地点",
            type: "map",
            mapType: "china",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              { name: "北京", value: Math.round(Math.random() * 1000) },
              { name: "天津", value: Math.round(Math.random() * 1000) },
              { name: "上海", value: Math.round(Math.random() * 1000) },
              { name: "重庆", value: Math.round(Math.random() * 1000) },
              { name: "河北", value: Math.round(Math.random() * 1000) },
              { name: "安徽", value: Math.round(Math.random() * 1000) },
              { name: "新疆", value: Math.round(Math.random() * 1000) },
              { name: "浙江", value: Math.round(Math.random() * 1000) },
              { name: "江西", value: Math.round(Math.random() * 1000) },
              { name: "山西", value: Math.round(Math.random() * 1000) },
              { name: "内蒙古", value: Math.round(Math.random() * 1000) },
              { name: "吉林", value: Math.round(Math.random() * 1000) },
              { name: "福建", value: Math.round(Math.random() * 1000) },
              { name: "广东", value: Math.round(Math.random() * 1000) },
              { name: "西藏", value: Math.round(Math.random() * 1000) },
              { name: "四川", value: Math.round(Math.random() * 1000) },
              { name: "宁夏", value: Math.round(Math.random() * 1000) },
              { name: "香港", value: Math.round(Math.random() * 1000) },
              { name: "澳门", value: Math.round(Math.random() * 1000) },
            ],
          },
          {
            name: "比赛地点",
            type: "map",
            mapType: "china",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              { name: "北京", value: Math.round(Math.random() * 1000) },
              { name: "天津", value: Math.round(Math.random() * 1000) },
              { name: "上海", value: Math.round(Math.random() * 1000) },
              { name: "广东", value: Math.round(Math.random() * 1000) },
              { name: "台湾", value: Math.round(Math.random() * 1000) },
              { name: "香港", value: Math.round(Math.random() * 1000) },
              { name: "澳门", value: Math.round(Math.random() * 1000) },
            ],
          },
        ],
      });
    },
    watermethods(element) {
      var myChart = this.$echarts.init(document.getElementById(element));
      myChart.setOption({
        title: {
          text: "公里数", //标题
          left: "10px",
          top: "5px",
          textStyle: {
            color: "#666",
          },
        },
        legend: {
          data: ["水上专项", "陆上专项"], //顶部色块
          x: "center",
          top: "5px",
        },
        tooltip: {
          trigger: "item",
          formatter: " <br/>{c}",
        },
        xAxis: {
          boundaryGap: false,
          data: this.arrvalue
        },
        yAxis: {},
        series: [
          {
            name: "水上专项",
            type: "line",
            smooth: true,
            data: this.pointArr,
          },
          {
            name: "陆上专项",
            type: "line",
            smooth: true,
            data: this.pointArr2,
          },
        ],
        grid: {
          top: "50",
          left: "40",
          right: "20",
          bottom: "25",
        },
        color: ["#F56C6C", "#409eff"], //设置颜色，也可以在对应的数据里面设置（itemStyle属性中）
      });
    },
  },
};
</script>

<style scoped>
.TrainerNow {
  padding: 26px 8px;
  font-size: 16px;
  margin-left: 6px;
  font-weight: bold;
}
.newill {
  margin-left: 15px;
}
.el-steps--horizontal {
  padding-left: 30px;
}
.el-steps--horizontal[data-v-bc2c2dea] {
  padding-top: 71px;
  margin-bottom: 95px;
}
.trainer-container {
  padding: 32px;
  background-color: #f0f2f5;
  position: relative;
}
.server-table {
  margin-left: 20px;
}
.server-table:hover {
  cursor: pointer;
  color: #409eff;
}
.server-table {
  width: 25%;
  height: 200px;
}
/* 饼状图 */
#pic1,
#pic2,
#pic3,
#pic4,
#pic5,
#pic6,
#pic7,
#pic8 {
  width: 400px;
  height: 400px;
  margin: 20px auto;
}
#pic9 {
  width: 1150px;
  height: 400px;
  margin: 20px auto;
}
.target {
  border-right: 1px solid gray;
  padding-right: 10px;
  padding-left: 10px;
  margin-right: 20px;
}
.el-card__body {
  text-align: center;
}
.train-font {
  font-weight: 500;
}
.train-target {
  margin-top: 15px;
  margin-bottom: 15px;
  color: #8abcfc;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
</style>
<style>
.app-main {
  margin-top: 20px;
}
.el-card__body {
  text-align: center;
}
.traing {
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #2583ff;
  margin-right: 7px;
  margin-left: 7px;
}
.admin-icon .el-step__icon-inner {
  font-size: 31px;
}
.target-time {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}
.Completion {
  margin-bottom: 20px;
}
.el-select-dropdown__item {
  text-align: center;
}
.nowtarget {
  text-align: center;
  margin-top: 50px;
}
#pictrues {
  height: 300px;
}
</style>


